<template>
    <div class="article">
        <div class="btn" v-if="state">
            <van-checkbox
            v-model="item.check"
            checked-color="#F8531B"
            icon-size="0.40rem"
            @click="onCheck(item.id)"
            >
            </van-checkbox>
        </div>
        <div class="main">
            <div class="content">
                <div class="details">
                    <h5 class="title">{{item.draft_content.title}}</h5>
                    <p class="text" v-html="item.draft_content.detail"></p>
                </div>
                <div class="other">
                    <span class="time">{{item.create_time}}</span>
                    <span class="category">{{item.type}}</span>
                </div>
            </div>
            <div class="preview">
                <van-image
                width="1.6rem"
                height="1.4rem"
                fit="fill"
                :show-error="false"
                :src="`${item.draft_content.image ? item.draft_content.image : ''}`"
                />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        item:{},
        state:{
            type:Boolean
        },
        allCheck:{
            type:Boolean
        }
    },
    name:"Article",
    data() {
        return {
            
        }
    },
    methods:{
        onCheck(e){
            this.$emit('select',e)
            this.$forceUpdate()
        }
    },
    watch: {
        allCheck:{
            handler(res){
                if(res == this.item.check){
                    return;
                }else{
                    this.$emit('select',this.item.id)
                    this.item.check = res
                }
                this.$forceUpdate()
            }
        },
    },
    
}
</script>

<style scoped>
.article{
    display:flex;
    align-items:center;
    position: relative;
    padding:0.24rem 0.24rem 0.24rem 0.7rem;
    border-bottom:0.02rem solid #f5f5f5;
    overflow: hidden;
}
.article .btn{
    position: absolute;
    left:0.20rem;
    top:0.70rem;
}
.article .main{
    min-width:100%;
    display:flex;
    justify-content:space-between;
    align-items: flex-end;
}
.article .main .content{
    flex:1;
    height:1.4rem;
    position: relative;
    overflow: hidden;
    margin-right:0.2rem;
}

.article .main .content .details .title{
    color:#333;
    font-size:0.32rem;
    line-height:1.3;
    margin-bottom:0.1rem;
    display:-webkit-box;
    font-weight:normal;
    text-overflow:-o-ellipsis-lastline;
    text-overflow: ellipsis;
    overflow: hidden;
    line-clamp:2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.article .main .content .details .text{
    color:#a3a3a3;
    font-size:0.28rem;
}
.article .main .content .other{
    color:#a3a3a3;
    display:flex;
    align-items: center;
    position: absolute;
    bottom:0;
    left:0;
}
.article .main .content .other .time{
    font-size:0.28rem;
    margin-right:0.1rem;
}
.article .main .content .other .category{
    font-size:0.2rem;
    background:#f5f5f5;
    padding:0.06rem 0.08rem;
    border-radius:0.1rem;
}
.article .main .preview{
    width:1.6rem;
    height:1.4rem;
}
</style>